<template>
  <div id="app">
    <div>根组件</div>
    <router-link to="/home" tag="li" active-class="hehe"> 首页 </router-link>
    <router-link to="/my" tag="li" active-class="hehe"> 我的 </router-link>
    <button @click="jump">动态详情</button>
    <!-- 商品1 -->
    <button @click="goDetail(1)">商品1</button>
    <!-- 商品2 -->
    <button @click="goDetail(2)">商品2</button>
    <!-- 商品3 -->
    <button @click="goDetail(3)">商品3</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    jump() {
      // const num = Math.random();
      // this.$router.push(`/detail/${num}`);
      this.$router.push({
        path: "/detail/123/hehe/456",
        // params: {
        //   id: 666,
        //   us: 888,
        // },
      });
    },
  },
};
</script>

<style>
.hehe {
  background: red;
}
</style>
